<template>
    <div>
        <swiper :options="swiperOption" class='icons-wrap'>
            <swiper-slide v-for="(page,index) in pages" :key='index'>
                <div class='icon' v-for="item in page" :key="item.id">
                    <div class='icon-img'>
                        <img :src="item.imgUrl" alt="" class='icon-img-content'>
                    </div>
                    <p class='icon-text'>{{item.text}}</p>
                </div>
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>
</template>
<script>
export default {
    name:"HomeIcons",
    props:{
        list:Array
    },
   data (){
       return{
            swiperOption:{
                pagination:'.swiper-pagination'
            }
       }
   },
   computed:{
      pages (){
        const pages=[];
        this.list.forEach((item,index)=>{
            const page=Math.floor(index/8);
            if(!pages[page]){
                pages[page]=[];
            }
            pages[page].push(item)
        })
        return pages
      }
   }
}
</script>
<style lang="scss" scoped>
@import "~styles/_parameters.scss";
@import "~styles/mixins.scss";
    .icons-wrap{
        width:100%;
        height:0;
        padding-bottom:50%;
        overflow:hidden;
        margin-top:0.1rem;
        margin-bottom:0.2rem;
    }
    .icon{
        position:relative;
        float:left;
        width:25%;
        height:0;
        padding-bottom:25%;
        text-align:center;
    }
    .icon-img{
        position:absolute;
        left:0;
        top:0;
        right:0;
        bottom:.44rem;
        width:100%;
        padding:0.05rem;
    }
    .icon-img-content{
        height:100%;
    }
    .icon-text{
        position:absolute;
        left:0;
        right:0;
        bottom:0;
        height:.44rem;
        line-height:.44rem;
        color:$textDarkColor;
        @extend %ellipsis;
    }
</style>
